<template>
  <view class="group-invite">
    <view class="form-box">
      <view style="height: 10rpx;"></view>
      <view class="form-item">
        <view class="label-with-paste">
          <text class="form-label">好友昵称</text>
        </view>
        <view class="input-with-paste">
          <input
            v-model="nickname"
            class="form-input"
            placeholder="请输入昵称"
            maxlength="20"
          />
        </view>
        <view class="input-tips">
          <text class="tips-text">为了避免特殊字符，请复制你的好友昵称再粘贴</text>
        </view>
      </view>
      <view class="form-item">
        <text class="form-label">邀请日期</text>
        <picker mode="date" :value="date" @change="onDateChange">
          <view class="form-picker-value">{{ date }}</view>
        </picker>
        <view class="input-tips">
          <text class="tips-text">可以输入大致的邀请时间，可以选择过去的时间，不一定要精确</text>
        </view>
      </view>
      <button class="submit-btn" @click="submit" :disabled="loading">
        {{ loading ? '提交中...' : '确认新增' }}
      </button>
    </view>
  </view>
</template>

<script>
import request from '@/utils/request.js'

export default {
  data() {
    return {
      nickname: '',
      date: '',
      today: '',
      minDate: '',
      loading: false,
    }
  },
  methods: {
    getToday() {
      const d = new Date()
      return d.toISOString().slice(0, 10)
    },
    getMinDate() {
      const d = new Date()
      d.setDate(d.getDate() - 7)
      return d.toISOString().slice(0, 10)
    },
    onDateChange(e) {
      const val = e.detail.value
      if (val < this.minDate) {
        uni.showToast({ title: '不能超过7天前', icon: 'none' })
        this.date = this.minDate
      } else if (val > this.today) {
        uni.showToast({ title: '不能超过今天', icon: 'none' })
        this.date = this.today
      } else {
        this.date = val
      }
    },
    async submit() {
      if (!this.nickname.trim()) {
        uni.showToast({ title: '请输入昵称', icon: 'none' })
        return
      }
      this.loading = true
      try {
        const res = await request({
          url: '/wechat/user/invitationAdd',
          method: 'POST',
          data: {
            nickname: this.nickname.trim(),
            invitation_date: this.date || this.today
          }
        })
        if (res.code === 0) {
          uni.showToast({ title: res.message || '邀请成功', icon: 'success' })
          setTimeout(() => {
            uni.navigateBack()
          }, 600)
        } else {
          uni.showToast({ title: res.message || '邀请失败', icon: 'none' })
        }
      } catch (e) {
        uni.showToast({ title: '网络错误', icon: 'none' })
      } finally {
        this.loading = false
      }
    }
  },
  onLoad() {
    this.today = this.getToday()
    this.minDate = this.getMinDate()
    this.date = this.today
  }
}
</script>

<style scoped>
.group-invite {
  min-height: 100vh;
  background: var(--page-bg, #f7f8fa);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20rpx;
}
.form-box {
  width: 90vw;
  max-width: 600rpx;
  background: var(--card-bg, #fff);
  border-radius: 18rpx;
  box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.06);
  padding: 48rpx 32rpx 40rpx 32rpx;
  display: flex;
  flex-direction: column;
  gap: 28rpx;
}
.form-item {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}
.form-label {
  font-size: 28rpx;
  color: #888;
  font-weight: 500;
}
.form-input {
  height: 80rpx;
  border-radius: 16rpx;
  font-size: 32rpx;
  background: var(--input-bg, #f7f8fa);
  border: 1rpx solid #e0e0e0;
  padding: 0 24rpx;
  color: var(--text, #222);
  width: 100%;
  box-sizing: border-box;
}
.input-tips {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rpx;
}
.tips-text {
  font-size: 24rpx;
  color: #999;
  flex: 1;
}
.paste-btn {
  min-width: 120rpx;
  height: 48rpx;
  background: var(--primary, #2979ff);
  color: #fff;
  border: none;
  border-radius: 24rpx;
  font-size: 24rpx;
  padding: 0 16rpx;
}
.paste-btn:active {
  background: #1760d6;
}
.form-picker-value {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: #f7f8fa;
  border-radius: 16rpx;
  font-size: 32rpx;
  color: var(--text, #222);
  padding: 0 24rpx;
  border: 1rpx solid #e0e0e0;
  box-sizing: border-box;
  text-align: left;
}
.submit-btn {
  width: 100%;
  height: 80rpx;
  background: var(--primary, #2979ff);
  color: #fff;
  border: none;
  border-radius: 16rpx;
  font-size: 32rpx;
  margin-top: 24rpx;
}
.submit-btn[disabled] {
  background: #ccc;
  color: #fff;
}
.input-with-paste {
  display: flex;
  align-items: center;
  gap: 16rpx;
}
.paste-btn-inline {
  min-width: 120rpx;
  height: 48rpx;
  background: var(--primary, #2979ff);
  color: #fff;
  border: none;
  border-radius: 24rpx;
  font-size: 24rpx;
  padding: 0 16rpx;
}
.paste-btn-inline:active {
  background: #1760d6;
}
.label-with-paste {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style> 